{% extends 'registrar/base.html' %}
{% load staticfiles %}
{% block content %}


        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Teaching
                    <small>Here is where you can become a teacher</small>
                </h1>
                <ol class="breadcrumb">
                    <li class="active">
                        <i class="fa fa-suitcase"></i> Teaching
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Courses Rows -->
        <div id="ajax_table_placeholder"
           name="ajax_table_placeholder">
           {% if courses.count == 0 or teacher == None %}
           
           <div class="jumbotron">
               <h1>Become a Teacher!</h1>
               <p>Help spread the knowledge to the rest of humankind as a teacher.</p>
               <p><a href="#"
                    class="btn btn-primary btn-lg"
                  onclick="ajax_course_modal(0);"
                     role="button">Create Course »</a>
               </p>
           </div>
           
           {% endif %}
        </div>
        <!-- /.row -->
        
<!-- Modal -->
<div id="ajax_modal_placeholder"
   name="ajax_modal_placeholder"></div>
<!-- end modal -->

<script>
    /**
     * When the page loads up, get the table data.
     */
{% if courses.count > 0 %}
    $(document).ready(function(){
       ajax_refresh_teaching_table();
    });
{% endif %}
    
    function ajax_refresh_teaching_table()
    {
        $.ajax( 'refresh_teaching_table', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            type: 'post',
            success: function(result) {
                    // success code execution here
                    $('#ajax_table_placeholder').html(result); // Update UI.
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
                // completion code here
            }
        });
    }
    
    /**
     *  Function will call AJAX function to load the modal for the new course
     *  creation UI.
     */
    function ajax_course_modal(course_id)
    {
        if (course_id > 0)
        {
            $('#edit_' + course_id + '_btn').prop("disabled", true); // Lock button
        } else {
            $('#new_course_btn').prop("disabled", true); // Lock button
        }
        $.ajax( 'course_modal', {
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'course_id': course_id,
            },
            type: 'post',
            success: function(result) {
                // success code execution here
                $('#ajax_modal_placeholder').html(result); // Update UI.
                $('#new_course_modal').modal();           // Unhide view.
            },
            error: function(xhr,status,error) {
                // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    function ajax_delete_course_modal(course_id)
    {
        $('#del_' + course_id + '_btn').prop("disabled", true); // Lock button
        $.ajax( 'delete_course_modal', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'course_id': course_id,
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               $('#ajax_modal_placeholder').html(result); // Update UI.
               $('#delete_course_modal').modal();           // Unhide view.
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    function view_course_page(course_id)
    {
        window.location = 'teacher/course/' + course_id + '/overview';
    }
</script>
{% endblock content %}
